<template>
  <view class="login-container">
    <view class="login-form">
      <view class="form-title">欢迎登录</view>
      <view class="form-group">
        <text class="form-label">用户名</text>
        <input type="text" v-model="username" class="form-input" placeholder="请输入用户名" placeholder-style="color: #CCCCCC" />
      </view>
      <view class="form-group">
        <text class="form-label">密码</text>
        <input type="password" v-model="password" class="form-input" placeholder="请输入密码" placeholder-style="color: #CCCCCC" password="true" />
      </view>
      <button class="login-button" @click="handleLogin">登录</button>
      <view class="login-tip" v-if="loginError">
        <text class="error-text">{{ loginError }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { API_BASE_URL } from '../../utils/config';

const router = useRouter();
const username = ref('');
const password = ref('');
const loginError = ref('');

const handleLogin = async () => {
  // 简单的表单验证
  if (!username.value || !password.value) {
    loginError.value = '用户名和密码不能为空';
    return;
  }

  try {
    const res = await uni.request({
      url: `${API_BASE_URL}/login`,
      method: 'POST',
      data: {
        username: username.value,
        password: password.value
      }
    });

    if (res.statusCode === 200 && res.data.success) {
      // 保存登录状态
      uni.setStorageSync('token', res.data.token);
      uni.setStorageSync('userInfo', res.data.userInfo);
      
      // 登录成功后跳转到现金流水页面
      router.push('/pages/cashflow/cashflow');
    } else {
      loginError.value = res.data?.error || '登录失败，请检查用户名和密码';
    }
  } catch (error) {
    console.error('登录请求失败:', error);
    loginError.value = '网络错误，请稍后重试';
  }
};
</script>

<style>
/* 适配不同尺寸的手机屏幕 */
@media screen and (min-width: 768px) {
  .login-form {
    max-width: 600rpx;
  }
}

/* 登录页面容器样式 - 适合手机端全屏显示 */
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #F8F8F8;
  padding: 60rpx 40rpx;
  box-sizing: border-box;
  /* 小程序适配背景 */
  background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
}

/* 登录表单样式 - 优化宽度和圆角 */
.login-form {
  width: 100%;
  max-width: 700rpx;
  background-color: #FFFFFF;
  border-radius: 24rpx;
  padding: 60rpx 48rpx;
  box-shadow: 0 4rpx 30rpx rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  /* 增加表单在小屏幕上的视觉重量 */
  transform: translateY(-20rpx);
}

/* 表单标题样式 - 更大更醒目 */
.form-title {
  font-size: 56rpx;
  font-weight: 600;
  text-align: center;
  margin-bottom: 80rpx;
  color: #333333;
  /* 增加标题的视觉效果 */
  letter-spacing: 2rpx;
}

/* 表单组样式 - 调整间距 */
.form-group {
  margin-bottom: 50rpx;
}

/* 表单标签样式 - 优化字体大小和颜色 */
.form-label {
  display: block;
  font-size: 32rpx;
  color: #555555;
  margin-bottom: 20rpx;
  font-weight: 500;
}

/* 输入框样式 - 优化高度和边框 */
.form-input {
  width: 100%;
  height: 100rpx;
  border: 2rpx solid #E8E8E8;
  border-radius: 12rpx;
  padding: 0 30rpx;
  font-size: 32rpx;
  box-sizing: border-box;
  color: #333333;
  background-color: #FFFFFF;
  /* 输入框聚焦效果优化 */
  transition: all 0.3s ease;
  /* 适配小程序的输入框样式 */
  line-height: 100rpx;
}

.form-input:focus {
  border-color: #07C160;
  outline: none;
  box-shadow: 0 0 0 4rpx rgba(7, 193, 96, 0.1);
}

/* 登录按钮样式 - 更符合小程序设计规范 */
.login-button {
  width: 100%;
  height: 108rpx;
  background-color: #07C160;
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: 600;
  border-radius: 12rpx;
  margin-top: 60rpx;
  border: none;
  /* 按钮点击效果优化 */
  transition: all 0.2s ease;
  /* 适配小程序按钮样式 */
  line-height: 108rpx;
  letter-spacing: 4rpx;
}

.login-button:active {
  background-color: #06AD56;
  transform: scale(0.98);
}

/* 错误提示样式 - 优化显示效果 */
.login-tip {
  margin-top: 30rpx;
  text-align: center;
  padding: 0 20rpx;
}

.error-text {
  font-size: 28rpx;
  color: #FF4757;
  line-height: 1.4;
}

/* 适配小程序的特殊样式 */
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 禁用文本选择 */
* {
  -webkit-user-select: none;
  user-select: none;
}

input {
  -webkit-user-select: auto;
  user-select: auto;
}
</style>